<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Widget with simple Resize Plugin</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Widget with simple Resize Plugin</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This example shows the simple use case where we make an overlay resizable.</p>
</div>

<div class="example">
    <style>
.example .yui3-overlay {
    background:#161e31;
    color:white;
    padding:10px;
    border-radius:3px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    overflow:hidden;
}
.example .yui3-overlay a {
    text-decoration:none;
    color: #30bef2;
}
.example .yui3-overlay a:hover {
    color: #8cd7f2;
}

</style>


<div id="overlay">
    <p>Did you know that the YUI Team tweets regularly under the handle <a href="http://www.twitter.com/yuilibrary" alt="yuilibrary">@yuilibrary</a>?</p>

    <p>You can also follow some team members directly: <a href="http://www.twitter.com/allenr" alt="Allen R.">@allenr</a>, <a href="http://www.twitter.com/ls_n" alt="Luke S.">@ls_n</a>, <a href="http://www.twitter.com/yaypie" alt="Ryan G.">@yaypie</a>, <a href="http://www.twitter.com/tilomitra" alt="Tilo M.">@tilomitra</a>, <a href="http://www.twitter.com/reid" alt="Reid B.">@reid</a> and <a href="http://www.twitter.com/davglass" alt="Dav G.">@davglass</a>.</p>
</div>

<p><strong>YUI 3 is Yahoo!'s next-generation JavaScript and CSS library.</strong> It powers the new Yahoo! homepage, Yahoo! Mail, and many other Yahoo! sites. The YUI 3 Library has been redesigned and rewritten from the ground up incorporating what we've learned in five years of dedicated library development. The library includes the core components, a full suite of utilities, the Widget Infrastructure, a growing collection of widgets, CSS resources, and tools. </p>

<p>
    <input type='button' class=".exampleBtn" id='launchOverlay' value="Show Overlay">
    <input type='button' class=".exampleBtn" id='resizeOverlay' value='Allow Resizing' disabled>
    <input type='button' class=".exampleBtn" id='dragOverlay' value='Allow Dragging' disabled>
</p>

<script>
    YUI().use('overlay', 'resize-plugin', 'dd-plugin', function(Y) {
        var overlay = new Y.Overlay({
           width: "200px",
           srcNode: "#overlay",
           visible: false,
           zIndex:5,
           align: {node:".example", points:["tc", "bc"]}
        }),

        launchBtn = Y.one('#launchOverlay'),
        resizeBtn = Y.one("#resizeOverlay"),
        dragBtn = Y.one('#dragOverlay');

        overlay.render();

        launchBtn.on('click', function(e) {
           overlay.set('visible', true);
           this.set('disabled', true);
           resizeBtn.set('disabled', false);
           dragBtn.set('disabled', false);
        });

        resizeBtn.on('click', function(e) {
           overlay.plug(Y.Plugin.Resize);
           this.set('value', 'Overlay is now resizable!');
           this.set('disabled', true);
        });

        dragBtn.on('click', function(e) {
           overlay.plug(Y.Plugin.Drag);
           this.set('value', 'Overlay is now draggable!');
           this.set('disabled', true);
        });
    });


</script>


</div>

<h3>Setting up the Node</h3>
<p>First we create the HTML for an overlay along with the other content ont he page</p>

<pre class="code prettyprint">&lt;div id=&quot;overlay&quot;&gt;
    &lt;p&gt;Did you know that the YUI Team tweets regularly under the handle &lt;a href=&quot;http:&#x2F;&#x2F;www.twitter.com&#x2F;yuilibrary&quot; alt=&quot;yuilibrary&quot;&gt;@yuilibrary&lt;&#x2F;a&gt;?&lt;&#x2F;p&gt;

    &lt;p&gt;You can also follow some team members directly: &lt;a href=&quot;http:&#x2F;&#x2F;www.twitter.com&#x2F;allenr&quot; alt=&quot;Allen R.&quot;&gt;@allenr&lt;&#x2F;a&gt;, &lt;a href=&quot;http:&#x2F;&#x2F;www.twitter.com&#x2F;ls_n&quot; alt=&quot;Luke S.&quot;&gt;@ls_n&lt;&#x2F;a&gt;, &lt;a href=&quot;http:&#x2F;&#x2F;www.twitter.com&#x2F;yaypie&quot; alt=&quot;Ryan G.&quot;&gt;@yaypie&lt;&#x2F;a&gt;, &lt;a href=&quot;http:&#x2F;&#x2F;www.twitter.com&#x2F;tilomitra&quot; alt=&quot;Tilo M.&quot;&gt;@tilomitra&lt;&#x2F;a&gt;, &lt;a href=&quot;http:&#x2F;&#x2F;www.twitter.com&#x2F;reid&quot; alt=&quot;Reid B.&quot;&gt;@reid&lt;&#x2F;a&gt; and &lt;a href=&quot;http:&#x2F;&#x2F;www.twitter.com&#x2F;davglass&quot; alt=&quot;Dav G.&quot;&gt;@davglass&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;

&lt;p&gt;&lt;strong&gt;YUI 3 is Yahoo!&#x27;s next-generation JavaScript and CSS library.&lt;&#x2F;strong&gt; It powers the new Yahoo! homepage, Yahoo! Mail, and many other Yahoo! sites. The YUI 3 Library has been redesigned and rewritten from the ground up incorporating what we&#x27;ve learned in five years of dedicated library development. The library includes the core components, a full suite of utilities, the Widget Infrastructure, a growing collection of widgets, CSS resources, and tools. &lt;&#x2F;p&gt;

&lt;p&gt;
    &lt;input type=&#x27;button&#x27; class=&quot;.exampleBtn&quot; id=&#x27;launchOverlay&#x27; value=&quot;Show Overlay&quot;&gt;
    &lt;input type=&#x27;button&#x27; class=&quot;.exampleBtn&quot; id=&#x27;resizeOverlay&#x27; value=&#x27;Allow Resizing&#x27; disabled&gt;
    &lt;input type=&#x27;button&#x27; class=&quot;.exampleBtn&quot; id=&#x27;dragOverlay&#x27; value=&#x27;Allow Dragging&#x27; disabled&gt;
&lt;&#x2F;p&gt;</pre>


<p>Next, we give that element some CSS to make it visible.</p>

<pre class="code prettyprint">.example .yui3-overlay {
    background:#161e31;
    color:white;
    padding:10px;
    border-radius:3px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    overflow:hidden;
}
.example .yui3-overlay a {
    text-decoration:none;
    color: #30bef2;
}
.example .yui3-overlay a:hover {
    color: #8cd7f2;
}</pre>


<h3>Setting up the YUI Instance</h3>
<p>We need to create our YUI instance and tell it to load the <code>resize-plugin</code> module, along with the 'overlay' module; If we wanted the resize to be constrained, we would also need to include the 'resize-constrain' plugin.</p>

<pre class="code prettyprint">YUI().use(&#x27;resize-plugin&#x27;);</pre>


<h3>Making the Widget Resizable</h3>

<p>When the resizable button is pressed, we plug the <code>Y.Overlay</code> instance with <code>Y.Plugin.Resize</code>.</p>

<pre class="code prettyprint">overlay.plug(Y.Plugin.Resize);</pre>


<p>Upon instantiation, the widget's drag handles will appear and the element is resizable via drag-and-drop. The widget will be notified of x, y, width and height changes.</p>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Resize a node.">
                                        <a href="simple-resize.html">Simple Resize</a>
                                    </li>
                                
                            
                                
                                    <li data-description="A simple resize implementation that utilizes the ResizeConstrained plugin to set min/max dimensions and to lock in the resized element&#x27;s aspect ratio.">
                                        <a href="constrain-resize.html">Constrain a Resize</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows an 8-way image resize, providing the CSS needed for a common image-resize visual treatment.">
                                        <a href="image-resize.html">8-way Image Resize</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Plugs a widget with resize functionality.">
                                        <a href="simple-resize-plugin.html">Widget with simple Resize Plugin</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Plugs a widget with resize functionality, and implements ResizeConstrained">
                                        <a href="constrain-resize-plugin.html">Widget with Resize Plugin under constraints</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
